<!DOCTYPE html>
<html>
<head>
<title>Capacitor Resistor System</title>
</head>
<body>
<canvas id="physicsCanvas" width="480" height="400"></canvas>
<script>
const canvas = document.getElementById("physicsCanvas");
const ctx = canvas.getContext("2d");

// --- Style and Font Settings ---
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';

// --- Left side: Resistor and Connections ---
// Box for Resistor
ctx.beginPath();
ctx.moveTo(80, 170);
ctx.lineTo(130, 170);
ctx.lineTo(130, 270);
ctx.lineTo(80, 270);
ctx.closePath();
ctx.stroke();

// Resistor Zigzag
ctx.beginPath();
ctx.moveTo(105, 180);
ctx.lineTo(115, 188);
ctx.lineTo(95, 203);
ctx.lineTo(115, 218);
ctx.lineTo(95, 233);
ctx.lineTo(105, 243);
ctx.stroke();

// Label R
ctx.font = "italic 22px serif";
ctx.fillText("R", 50, 225);

// Connection Wires
ctx.beginPath();
ctx.moveTo(130, 200); // Top wire
ctx.lineTo(180, 200);
ctx.moveTo(130, 240); // Bottom wire
ctx.lineTo(250, 240); // Connects to housing
ctx.stroke();

// Label v0
ctx.beginPath();
ctx.moveTo(150, 240);
ctx.lineTo(150, 200);
// Arrows
ctx.moveTo(150, 240);
ctx.lineTo(145, 235);
ctx.moveTo(150, 240);
ctx.lineTo(155, 235);
ctx.moveTo(150, 200);
ctx.lineTo(145, 205);
ctx.moveTo(150, 200);
ctx.lineTo(155, 205);
ctx.stroke();
ctx.font = "italic 22px serif";
ctx.fillText("v", 158, 220);
ctx.font = "italic 15px serif";
ctx.fillText("0", 168, 227);


// --- Right side: Capacitor Assembly ---
// Main Housing (fixed part)
ctx.beginPath();
ctx.moveTo(250, 120);
ctx.lineTo(250, 320); // Left wall
ctx.lineTo(430, 320); // Bottom wall
ctx.lineTo(430, 120); // Right wall
ctx.lineTo(395, 120); // Top wall segment 1
ctx.lineTo(395, 100);
ctx.lineTo(375, 100);
ctx.lineTo(375, 120);
ctx.lineTo(355, 120); // Top wall segment 2
ctx.lineTo(355, 90);
ctx.lineTo(315, 90);
ctx.lineTo(315, 120);
ctx.lineTo(295, 120); // Top wall segment 3
ctx.lineTo(295, 100);
ctx.lineTo(275, 100);
ctx.lineTo(275, 120);
ctx.lineTo(250, 120); // Top wall segment 4
ctx.stroke();

// Fixed Plates P' and P'' (Pipes)
ctx.font = "italic 22px serif";
ctx.beginPath();
ctx.moveTo(385, 100);
ctx.lineTo(385, 40); // P''
ctx.fillText("P''", 390, 45);
ctx.moveTo(285, 100);
ctx.lineTo(285, 40); // P'
ctx.fillText("P'", 270, 45);
ctx.stroke();

// Inner Nozzle Shape
ctx.beginPath();
ctx.moveTo(250, 240);
ctx.quadraticCurveTo(280, 225, 320, 260);
ctx.stroke();

// Movable Plate P Assembly
// Bellows 'r'
ctx.beginPath();
ctx.moveTo(180, 200);
ctx.lineTo(188, 195);
ctx.lineTo(196, 205);
ctx.lineTo(204, 195);
ctx.lineTo(212, 205);
ctx.lineTo(220, 200);
ctx.stroke();
ctx.font = "italic 22px serif";
ctx.fillText("r", 195, 228);

// Plate P curve and stem
ctx.beginPath();
ctx.moveTo(220, 200);
ctx.bezierCurveTo(260, 195, 290, 145, 335, 135);
ctx.lineTo(335, 60); // Plate P
ctx.stroke();
ctx.fillText("P", 340, 65);

// Little T-bar base for P
ctx.beginPath();
ctx.moveTo(325, 145);
ctx.lineTo(345, 145);
ctx.stroke();

// Label h
const h_x = 365;
const h_y1 = 145; // Bottom of P base (T-bar)
const h_y2 = 227; // Top of nozzle
ctx.beginPath();
ctx.moveTo(h_x, h_y1);
ctx.lineTo(h_x, h_y2);
// Ticks
ctx.moveTo(h_x - 5, h_y1);
ctx.lineTo(h_x + 5, h_y1);
ctx.moveTo(h_x - 5, h_y2);
ctx.lineTo(h_x + 5, h_y2);
ctx.stroke();
ctx.fillText("h", h_x + 10, (h_y1 + h_y2) / 2 + 8);

// --- Figure Caption ---
ctx.font = "bold 20px sans-serif";
ctx.fillText("Fig. 1.53", 200, 360);

</script>
</body>
</html>